<template>
  <div>
  <img :src="imgUrl" alt="" @click="changeImg" :title="text">
    <div class="box" :class="{red:isRed}"></div>
</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const text=ref('ikun')
const isRed=ref(true)
const imgUrl=ref('https://img0.baidu.com/it/u=4154833386,1880487480&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1727024400&t=844238b1d24601c103ba81bd10895cc7')
const changeImg=()=>{
  imgUrl.value='https://img0.baidu.com/it/u=2589248582,3962932903&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1727024400&t=9b06eb14aa8b7ef3de18ad40b5f3af38'
  text.value='只因你太美'
  isRed.value=!isRed.value
}
</script>

<style>
img{
  width: 200px;
}
.box{
  width: 200px;
  height: 200px;
}
.red{
  background-color: red;
}
</style>